<template>
  <div class="gran_Situation">
    <el-table :data="tableData" v-loading="loading" border>
      <el-table-column label="商户名称" prop="shopName" align="center"></el-table-column>
      <el-table-column label="停车券名称" align="center">
        <template slot-scope="scope">
          {{scope.row.parkingDuration}}小时停车券
        </template>
      </el-table-column>
      <el-table-column label="适用停车场" prop="" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" width="200">
            <span slot="reference" class="seePark">{{scope.row.parkNameList | parkListFilter}}</span>
            <p style="text-align: center;" v-for="item in scope.row.parkNameList">
              {{item}}
            </p>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="发放张数" prop="quantity" align="center"></el-table-column>
      <el-table-column label="领取张数" prop="receiveCount" align="center"></el-table-column>
      <el-table-column label="使用条件" prop="activationRequirements" align="center"></el-table-column>
    </el-table>

    <footer>
      <el-pagination
        :current-page="searchForm.currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="searchForm.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        align="center"
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>



  </div>
</template>

<script>
  export default {
    filters: {
      parkListFilter(park) {
        return park.length > 1 ? park[0] + '...' : park[0]
      }
    },
    data() {
      return {
        searchForm: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0,
        loading: true
      }
    },

    mounted() {
      this.getTicketSetList();
    },

    methods: {
      getTicketSetList() {
        this.loading = true;
        this.$axios({
          method: 'get',
          url: '/shop/park-ticket-set/list',
          params: this.searchForm
        }).then((res) => {
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.loading = false;
          }
        })
      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.getTicketSetList();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.searchForm.currentPage = val;
        this.getTicketSetList();
      }
    }
  }
</script>

<style scoped>
  .gran_Situation {
    padding: 20px;
  }

  .seePark:hover {
    cursor: pointer;
  }

  footer {
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
  }




</style>
